<script>
import CustomFixDialog from '@/portal4.1/pc/component/common/Dialog/common/CustomFixDialog.vue'
import { dialog } from '@/mixins/dialog'
import { layout } from '@/mixins/layout'

export default {
  name: 'SettingDialog',
  components: { CustomFixDialog },
  mixins: [dialog, layout],
  computed: {
    leftBack() {
      return { backgroundImage: 'url(' + this.leftBg + ')' }
    },
    rightBack() {
      return { backgroundImage: 'url(' + this.rightBg + ')' }
    },
    activeColor() {
      return { '--active-color': this.layoutTheme.dialogActiveColor, '--active-back': this.layoutTheme.dialogActiveBack }
    }
  }
}
</script>

<template>
  <custom-fix-dialog
    :title="title"
    :visible.sync="dialogVisible"
    :before-close="handleClose"
    :width="width"
    :modal="modal"
    :top="top"
    append-to-body
  >
    <div class="notice-dialog">
      <div class="notice-left" :style="leftBack">
        <div class="notice-left-header">
          <i class="el-icon-message-solid active-color" :style="activeColor" />
          <span class="header-title">基础设置</span>
        </div>
      </div>
      <div class="notice-right" :style="rightBack">
        <div class="notice-left-header">
          <i class="el-icon-message-solid active-color" :style="activeColor" />
          <span class="header-title">栏目设置</span>
        </div>
      </div>
      <div class="notice-left" :style="leftBack">
        <div class="notice-left-header">
          <i class="el-icon-message-solid active-color" :style="activeColor" />
          <span class="header-title">栏目设置</span>
        </div>
      </div>
      <div class="notice-right" :style="rightBack">
        <div class="notice-left-header">
          <i class="el-icon-message-solid active-color" :style="activeColor" />
          <span class="header-title" />
        </div>
      </div>
    </div>
  </custom-fix-dialog>
</template>

<style lang="scss" scoped>
.notice-dialog {
  width: 100%;
  height: 100%;
  display: flex;
  .notice-left {
    width: 25%;
    height: 100%;
    background-size: cover;
    .notice-left-header {
      width: 100%;
      height: 50px;
      font-size: 1.1rem;
      line-height: 50px;
      text-align: left;
      font-weight: 600;
      .header-title {
        margin-left: 10px;
      }
      .active-color {
        color: var(--active-color);
      }
    }
  }
  .notice-right {
    width: 25%;
    height: 100%;
    background-size: cover;
    .notice-left-header {
      width: 100%;
      height: 50px;
      font-size: 1.1rem;
      line-height: 50px;
      text-align: left;
      font-weight: 600;
      .header-title {
        margin-left: 10px;
      }
      .active-color {
        color: var(--active-color);
      }
    }
  }
}
</style>
